<template>
  <div class="global">
    <el-container class="global-contain">
      <el-header>
        <div class="head">
          <div class="headtitle">高校教师成果管理系统</div>
          <div>
            <img v-if="user.avatar == null" src="../../assets/logo.png" style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt="" srcset="">
            <img v-else :src="user.icon" style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt="" srcset="">

            <el-dropdown>
              <span class="el-dropdown-link" style="color: #fff;">
                {{user.nickName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="personal()">个人信息</el-dropdown-item>
            
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container class="contain">
        <el-aside width="200px" class="aside">
          <el-menu :default-active="$route.path" router class="el-menu-demo menu"  >
            <el-menu-item index="/system/home"> <i class="el-icon-s-home menuicon" ></i>首页</el-menu-item>
            <el-menu-item index="/system/list"> <i class="el-icon-s-home menuicon" ></i>成果管理</el-menu-item>
 
            <el-submenu index="1">
              <template slot="title"> <i class="el-icon-user menuicon"></i>用户管理</template>
              <el-menu-item index="/system/teachermanage">教师信息</el-menu-item>
              <el-menu-item index="/system/productmanage">成果管理员信息</el-menu-item>
            </el-submenu>
           
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>
<script>
import service from '@/utils/request';
export default {
  data(){
    return{
      user:{}
    }
  },
  mounted(){

 this.getinfo()
  },
  methods:{
    async getinfo() {

            const res = await service.get("/auth/info");
            console.log(res)
            this.user = res.data.userInfo
            window.localStorage.setItem("userinfo", JSON.stringify(this.user))
        },
    personal(){

     this.$router.push({
      path:"/system/personal"
     })

    },
    updatepassword(){

     this.$router.push({
      path:"/product"
     })


    },
    logout(){
      window.localStorage.clear()
      this.$router.push({
        path:"/"
      })
    }
  }
}
</script>
<style>
.el-table thead tr th{
  background: #f8f8f8!important;
}
.el-main{
  background: #f8f8ff !important;
}
.menu .el-submenu__title{
  color: #fff !important;
}
.menu .el-menu-item{
  color: #fff !important;
}
.menu .is-active{
background: #2bb7e5!important;
}
.menu .el-submenu__title:hover{
  background: #2bb7e5!important;
}
.menu .el-menu-item:hover{
  background: #2bb7e5!important;
}
.menu{
  width: 100%;
  height: 100%;
  background: #2c334c !important ;
}
.menu .el-menu{
  width: 100%;
  height: 100%;
  background: #2c334c !important ;
}
.el-header {
  padding: 0px 20px !important;
  box-sizing: border-box;
  background: #2c334c;
}
.el-aside{
  overflow: hidden !important;

}
</style>
<style scoped>
.menuicon{
  color: #fff;
}
.contain{
  width: 100%;
  height: calc(100% - 60px);
}
.headtitle {
  font-weight: bold;
  color: #fff;
}

.head {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.global {
  width: 100%;
  height: 100%
}
.global-contain{
  width: 100%;
  height: 100%

}
.aside{
  height: 100%
}
</style>
